<template>
    <el-skeleton :loading="loading" animated :count="16">
        <template #template>
            <div class="item_album">
                <el-skeleton-item class="ske-img" variant="image" />
                <div class="ske-info">
                    <el-skeleton-item variant="h3" class="ske-name" />
                    <el-skeleton-item variant="h3" class="ske-name" style="width:50%" />
                </div>
            </div>
        </template>
        <template #default>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane :label="item.area_name" :name="item.area_code" v-for="item in areaList">
                    <div class='album'>
                        <router-link :to="{ path: '/rank', query: { id: item.id } }" class="item_album" :key="item.id"
                            v-for="item in albumList">
                            <div class="faceImg_album">
                                <el-image :src="item.picUrl + '?param=120y120'">
                                    <div slot="placeholder" class="image-slot">
                                        <i class="iconfont icon-placeholder"></i>
                                    </div>
                                </el-image>
                            </div>
                            <div class="info">
                                <div class="album-type">{{ item.type }}</div>
                                <div class="album-name" v-if="item.name">{{ item.name }}</div>
                                <div class="artist-name" v-if="item.artist">{{ item.artist.name }}</div>
                            </div>
                        </router-link>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </template>
    </el-skeleton>
</template>

<script>
import { topAlbum } from '@apis/http'
import { ElNotification } from 'element-plus'

export default {
    data() {
        return {
            areaList: [
                {
                    "area_name": "全部",
                    "area_code": "ALL"
                },
                {
                    "area_name": "华语",
                    "area_code": "ZH"
                },
                {
                    "area_name": "欧美",
                    "area_code": "EA"
                },
                {
                    "area_name": "韩国",
                    "area_code": "KR"
                },
                {
                    "area_name": "日本",
                    "area_code": "JP"
                }
            ],
            albumList: [],
            activeName: '',//默认打开第一个标签
            loading: ''
        };
    },
    methods: {
        handleClick(tab, event) {
            //获取tabs切换时的name
            let beforeTabId = event.target.getAttribute('id');
            let name = beforeTabId.split('-')[1];
            console.log(name);
            topAlbum({
                // limit: 12,
                area: name,
                // type: 'new'
            }).then(res => {
                // console.log(JSON.stringify(res.monthData));
                if (res.code === 200) {
                    this.albumList = res.monthData.slice(0, 16);
                } else {
                    ElNotification({
                        type: 'error',
                        title: '提示',
                        message: '接口请求错误，请查看topAlbum()接口',
                    })
                }
            })
        },
    },
    created: function () {
        //此处方法需要加{}，否则会报错
        topAlbum({}).then(res => {
            // console.log(JSON.stringify(res.monthData));
            if (res.code === 200) {
                this.albumList = res.monthData.slice(0, 16);
                //默认选中第一个分类
                this.activeName = this.areaList[0].area_code;
                this.loading = false;
            } else {
                ElNotification({
                    type: 'error',
                    title: '提示',
                    message: '接口请求错误，请查看topAlbum()接口',
                })
            }

        }).catch(res => {
            // ElNotification({
            //     type: 'error',
            //     duration: 0,
            //     title: '提示',
            //     message: res.message + ",url=" + res.config.url,
            // })
            this.loading = false;
            this.activeName = this.areaList[0].area_code;
            this.albumList = [
                {
                    "songs": [],
                    "paid": false,
                    "onSale": false,
                    "artists": [
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p4.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "Charlie Puth",
                            "id": 90331,
                            "img1v1Id_str": "18686200114669622"
                        }
                    ],
                    "copyrightId": 7002,
                    "alias": [],
                    "blurPicUrl": "http://p4.music.126.net/GNlgMW2nvOA5flwMLUV5vg==/109951167874368423.jpg",
                    "companyId": 0,
                    "pic": 109951167874368420,
                    "publishTime": 1663257600000,
                    "picUrl": "http://p3.music.126.net/GNlgMW2nvOA5flwMLUV5vg==/109951167874368423.jpg",
                    "commentThreadId": "R_AL_3_151508362",
                    "picId": 109951167874368420,
                    "artist": {
                        "img1v1Id": 18686200114669624,
                        "topicPerson": 0,
                        "alias": [],
                        "albumSize": 92,
                        "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                        "picUrl": "http://p3.music.126.net/y4BW_MFIZrx4BWd6TsbNCw==/109951167257756923.jpg",
                        "trans": "查理·普斯",
                        "picId": 109951167257756930,
                        "followed": false,
                        "briefDesc": "",
                        "musicSize": 328,
                        "name": "Charlie Puth",
                        "id": 90331,
                        "picId_str": "109951167257756923",
                        "transNames": [
                            "查理·普斯"
                        ],
                        "img1v1Id_str": "18686200114669622"
                    },
                    "briefDesc": "",
                    "status": 1,
                    "subType": "录音室版",
                    "description": "",
                    "company": "华纳音乐",
                    "tags": "",
                    "name": "I Don’t Think That I Like Her",
                    "id": 151508362,
                    "type": "Single",
                    "size": 1,
                    "picId_str": "109951167874368423",
                    "areaId": 96,
                    "exclusive": false,
                    "isSub": false
                },
                {
                    "songs": [],
                    "paid": false,
                    "onSale": false,
                    "artists": [
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p3.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "曹格",
                            "id": 2110,
                            "img1v1Id_str": "18686200114669622"
                        }
                    ],
                    "copyrightId": 1416737,
                    "alias": [],
                    "blurPicUrl": "http://p4.music.126.net/od08lPZJZC8VNnjczZozwg==/109951167855947285.jpg",
                    "companyId": 0,
                    "pic": 109951167855947280,
                    "publishTime": 1663257600000,
                    "picUrl": "http://p3.music.126.net/od08lPZJZC8VNnjczZozwg==/109951167855947285.jpg",
                    "commentThreadId": "R_AL_3_151210366",
                    "picId": 109951167855947280,
                    "artist": {
                        "img1v1Id": 18686200114669624,
                        "topicPerson": 0,
                        "alias": [
                            "曹佰豪",
                            "Gary Chaw"
                        ],
                        "albumSize": 23,
                        "img1v1Url": "http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                        "picUrl": "http://p4.music.126.net/8Q_hsKIlUE3QdkksPqI6fg==/41781441872687.jpg",
                        "trans": "",
                        "picId": 41781441872687,
                        "followed": false,
                        "briefDesc": "",
                        "musicSize": 262,
                        "name": "曹格",
                        "id": 2110,
                        "img1v1Id_str": "18686200114669622"
                    },
                    "briefDesc": "",
                    "status": 1,
                    "subType": "录音室版",
                    "description": "",
                    "company": "滚石唱片",
                    "tags": "",
                    "name": "我为歌狂 EP.2 滚石40 粤语精选",
                    "id": 151210366,
                    "type": "EP",
                    "size": 5,
                    "picId_str": "109951167855947285",
                    "areaId": 7,
                    "exclusive": false,
                    "isSub": false
                },
                {
                    "songs": [],
                    "paid": false,
                    "onSale": false,
                    "artists": [
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p4.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "姜云升",
                            "id": 1198123,
                            "img1v1Id_str": "18686200114669622"
                        },
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p3.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "石玺彤",
                            "id": 31880229,
                            "img1v1Id_str": "18686200114669622"
                        }
                    ],
                    "copyrightId": 1416771,
                    "alias": [],
                    "blurPicUrl": "http://p3.music.126.net/iKMUw122X4c9rBB9AGEANA==/109951167879605847.jpg",
                    "companyId": 0,
                    "pic": 109951167879605840,
                    "publishTime": 1663171200000,
                    "picUrl": "http://p4.music.126.net/iKMUw122X4c9rBB9AGEANA==/109951167879605847.jpg",
                    "commentThreadId": "R_AL_3_151641010",
                    "picId": 109951167879605840,
                    "artist": {
                        "img1v1Id": 18686200114669624,
                        "topicPerson": 0,
                        "alias": [],
                        "albumSize": 24,
                        "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                        "picUrl": "http://p4.music.126.net/daqU7RiA2mfTneyWQn2ZOg==/109951163582530189.jpg",
                        "trans": "",
                        "picId": 109951163582530190,
                        "followed": false,
                        "briefDesc": "",
                        "musicSize": 63,
                        "name": "姜云升",
                        "id": 1198123,
                        "picId_str": "109951163582530189",
                        "img1v1Id_str": "18686200114669622"
                    },
                    "briefDesc": "",
                    "status": 1,
                    "subType": "录音室版",
                    "description": "",
                    "company": "少城时代",
                    "tags": "",
                    "name": "流量Rapper",
                    "id": 151641010,
                    "type": "Single",
                    "size": 1,
                    "picId_str": "109951167879605847",
                    "areaId": 7,
                    "exclusive": false,
                    "isSub": false
                },
                {
                    "songs": [],
                    "paid": false,
                    "onSale": false,
                    "artists": [
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p4.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "Carly Rae Jepsen",
                            "id": 50934,
                            "img1v1Id_str": "18686200114669622"
                        }
                    ],
                    "copyrightId": 7003,
                    "alias": [],
                    "blurPicUrl": "http://p4.music.126.net/bLQPzqDOyiEHjMxZrTmj_w==/109951167878702110.jpg",
                    "companyId": 0,
                    "pic": 109951167878702110,
                    "publishTime": 1663257600000,
                    "picUrl": "http://p3.music.126.net/bLQPzqDOyiEHjMxZrTmj_w==/109951167878702110.jpg",
                    "commentThreadId": "R_AL_3_151620821",
                    "picId": 109951167878702110,
                    "artist": {
                        "img1v1Id": 18686200114669624,
                        "topicPerson": 0,
                        "alias": [],
                        "albumSize": 49,
                        "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                        "picUrl": "http://p3.music.126.net/2Rz-nvQEUb8zyyR2F4Ck6w==/109951167742327755.jpg",
                        "trans": "卡莉·蕾·吉普森",
                        "picId": 109951167742327760,
                        "followed": false,
                        "briefDesc": "",
                        "musicSize": 931,
                        "name": "Carly Rae Jepsen",
                        "id": 50934,
                        "picId_str": "109951167742327755",
                        "transNames": [
                            "卡莉·蕾·吉普森"
                        ],
                        "img1v1Id_str": "18686200114669622"
                    },
                    "briefDesc": "",
                    "status": 1,
                    "subType": "录音室版",
                    "description": "",
                    "company": "Silent Records IGA",
                    "tags": "",
                    "name": "Talking to Yourself",
                    "id": 151620821,
                    "type": "Single",
                    "size": 1,
                    "picId_str": "109951167878702110",
                    "areaId": 96,
                    "exclusive": false,
                    "isSub": false
                },
                {
                    "songs": [],
                    "paid": false,
                    "onSale": false,
                    "artists": [
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p4.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "ずっと真夜中でいいのに。",
                            "id": 15021101,
                            "img1v1Id_str": "18686200114669622"
                        }
                    ],
                    "copyrightId": 7003,
                    "alias": [],
                    "blurPicUrl": "http://p4.music.126.net/IE_pQhrVfQIn2Jy4_QxI6Q==/109951167879735764.jpg",
                    "companyId": 0,
                    "pic": 109951167879735760,
                    "publishTime": 1663171200000,
                    "picUrl": "http://p3.music.126.net/IE_pQhrVfQIn2Jy4_QxI6Q==/109951167879735764.jpg",
                    "commentThreadId": "R_AL_3_151642305",
                    "picId": 109951167879735760,
                    "artist": {
                        "img1v1Id": 18686200114669624,
                        "topicPerson": 0,
                        "alias": [
                            "ZUTOMAYO",
                            "ZTMY",
                            "ずとまよ"
                        ],
                        "albumSize": 27,
                        "img1v1Url": "http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                        "picUrl": "http://p3.music.126.net/it3tUtCfcRLZTxNhkjplRA==/109951165115946920.jpg",
                        "trans": "永远是深夜有多好｡",
                        "picId": 109951165115946910,
                        "followed": false,
                        "briefDesc": "",
                        "musicSize": 114,
                        "name": "ずっと真夜中でいいのに。",
                        "id": 15021101,
                        "picId_str": "109951165115946920",
                        "transNames": [
                            "永远是深夜有多好｡"
                        ],
                        "img1v1Id_str": "18686200114669622"
                    },
                    "briefDesc": "",
                    "status": 1,
                    "subType": "录音室版",
                    "description": "",
                    "company": "Universal Music LLC",
                    "tags": "",
                    "name": "夏枯れ",
                    "id": 151642305,
                    "type": "Single",
                    "size": 1,
                    "picId_str": "109951167879735764",
                    "areaId": 8,
                    "exclusive": false,
                    "isSub": false
                },
                {
                    "songs": [],
                    "paid": false,
                    "onSale": false,
                    "artists": [
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p3.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "林俊杰",
                            "id": 3684,
                            "img1v1Id_str": "18686200114669622"
                        }
                    ],
                    "copyrightId": 2710492,
                    "alias": [],
                    "blurPicUrl": "http://p4.music.126.net/KqrXXpxkeTsEdT9QXbfsmw==/109951167873216767.jpg",
                    "companyId": 0,
                    "pic": 109951167873216770,
                    "publishTime": 1663171200000,
                    "picUrl": "http://p4.music.126.net/KqrXXpxkeTsEdT9QXbfsmw==/109951167873216767.jpg",
                    "commentThreadId": "R_AL_3_151493746",
                    "picId": 109951167873216770,
                    "artist": {
                        "img1v1Id": 18686200114669624,
                        "topicPerson": 0,
                        "alias": [
                            "JJ Lin",
                            "Wayne Lim"
                        ],
                        "albumSize": 58,
                        "img1v1Url": "http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                        "picUrl": "http://p3.music.126.net/7636PzUiFMETHU7SAr05FA==/109951167878710661.jpg",
                        "trans": "",
                        "picId": 109951167878710660,
                        "followed": false,
                        "briefDesc": "",
                        "musicSize": 530,
                        "name": "林俊杰",
                        "id": 3684,
                        "picId_str": "109951167878710661",
                        "img1v1Id_str": "18686200114669622"
                    },
                    "briefDesc": "",
                    "status": 1,
                    "subType": "录音室版",
                    "description": "",
                    "company": "JFJ Productions",
                    "tags": "",
                    "name": "那些你很冒险的梦 (JJ20版)",
                    "id": 151493746,
                    "type": "Single",
                    "size": 1,
                    "picId_str": "109951167873216767",
                    "areaId": 7,
                    "exclusive": false,
                    "isSub": false
                },
                {
                    "songs": [],
                    "paid": false,
                    "onSale": false,
                    "artists": [
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p4.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "NAQT VANE",
                            "id": 54018931,
                            "img1v1Id_str": "18686200114669622"
                        }
                    ],
                    "copyrightId": 457010,
                    "alias": [],
                    "blurPicUrl": "http://p4.music.126.net/Bgd3XpTlFnWnMX68UC5Tbg==/109951167873029142.jpg",
                    "companyId": 0,
                    "pic": 109951167873029140,
                    "publishTime": 1663257600000,
                    "picUrl": "http://p4.music.126.net/Bgd3XpTlFnWnMX68UC5Tbg==/109951167873029142.jpg",
                    "commentThreadId": "R_AL_3_151491628",
                    "picId": 109951167873029140,
                    "artist": {
                        "img1v1Id": 18686200114669624,
                        "topicPerson": 0,
                        "alias": [],
                        "albumSize": 1,
                        "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                        "picUrl": "http://p3.music.126.net/K24udlUJxuv6C_ciHPAv4A==/109951167873796853.jpg",
                        "trans": "",
                        "picId": 109951167873796850,
                        "followed": false,
                        "briefDesc": "",
                        "musicSize": 1,
                        "name": "NAQT VANE",
                        "id": 54018931,
                        "picId_str": "109951167873796853",
                        "img1v1Id_str": "18686200114669622"
                    },
                    "briefDesc": "",
                    "status": 1,
                    "subType": "录音室版",
                    "description": "",
                    "company": "(P)2022 AVEX ENTERTAINMENT INC.",
                    "tags": "",
                    "name": "Break Free",
                    "id": 151491628,
                    "type": "Single",
                    "size": 1,
                    "picId_str": "109951167873029142",
                    "areaId": 8,
                    "exclusive": false,
                    "isSub": false
                },
                {
                    "songs": [],
                    "paid": false,
                    "onSale": false,
                    "artists": [
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p3.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "小老虎",
                            "id": 187462,
                            "img1v1Id_str": "18686200114669622"
                        },
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p4.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "也是福",
                            "id": 12118563,
                            "img1v1Id_str": "18686200114669622"
                        },
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p4.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "周士爵",
                            "id": 33903495,
                            "img1v1Id_str": "18686200114669622"
                        },
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p3.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "童漠男",
                            "id": 54061825,
                            "img1v1Id_str": "18686200114669622"
                        }
                    ],
                    "copyrightId": -1,
                    "alias": [],
                    "blurPicUrl": "http://p4.music.126.net/xc7qNpcjOF89XXhy93nmMw==/109951167881994592.jpg",
                    "companyId": 0,
                    "pic": 109951167881994600,
                    "publishTime": 1663344000000,
                    "picUrl": "http://p4.music.126.net/xc7qNpcjOF89XXhy93nmMw==/109951167881994592.jpg",
                    "commentThreadId": "R_AL_3_151704705",
                    "picId": 109951167881994600,
                    "artist": {
                        "img1v1Id": 18686200114669624,
                        "topicPerson": 0,
                        "alias": [],
                        "albumSize": 34,
                        "img1v1Url": "http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                        "picUrl": "http://p4.music.126.net/_WGUcXlGtkzRcWzo_RJayw==/109951162859830082.jpg",
                        "trans": "",
                        "picId": 109951162859830080,
                        "followed": false,
                        "briefDesc": "",
                        "musicSize": 182,
                        "name": "小老虎",
                        "id": 187462,
                        "picId_str": "109951162859830082",
                        "img1v1Id_str": "18686200114669622"
                    },
                    "briefDesc": "",
                    "status": 1,
                    "subType": "录音室版",
                    "description": "",
                    "company": "",
                    "tags": "",
                    "name": "一笑置之",
                    "id": 151704705,
                    "type": "Single",
                    "size": 1,
                    "picId_str": "109951167881994592",
                    "areaId": 7,
                    "exclusive": false,
                    "isSub": false
                },
                {
                    "songs": [],
                    "paid": false,
                    "onSale": false,
                    "artists": [
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p4.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "森朵$oulclean",
                            "id": 1184060,
                            "img1v1Id_str": "18686200114669622"
                        }
                    ],
                    "copyrightId": -1,
                    "alias": [
                        "So Bad"
                    ],
                    "blurPicUrl": "http://p4.music.126.net/EXjTz8w3_y9A2r2VaIxA0g==/109951167882319712.jpg",
                    "companyId": 0,
                    "pic": 109951167882319710,
                    "publishTime": 1663344000000,
                    "picUrl": "http://p4.music.126.net/EXjTz8w3_y9A2r2VaIxA0g==/109951167882319712.jpg",
                    "commentThreadId": "R_AL_3_151710229",
                    "picId": 109951167882319710,
                    "artist": {
                        "img1v1Id": 18686200114669624,
                        "topicPerson": 0,
                        "alias": [],
                        "albumSize": 12,
                        "img1v1Url": "http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                        "picUrl": "http://p4.music.126.net/MW80BA5fFnVKnG3SmuMdzA==/109951165314756587.jpg",
                        "trans": "",
                        "picId": 109951165314756590,
                        "followed": false,
                        "briefDesc": "",
                        "musicSize": 20,
                        "name": "森朵$oulclean",
                        "id": 1184060,
                        "picId_str": "109951165314756587",
                        "img1v1Id_str": "18686200114669622"
                    },
                    "briefDesc": "",
                    "status": 1,
                    "subType": "录音室版",
                    "description": "",
                    "company": "网易·云上",
                    "tags": "",
                    "name": "收债",
                    "id": 151710229,
                    "type": "Single",
                    "size": 1,
                    "picId_str": "109951167882319712",
                    "areaId": 7,
                    "exclusive": false,
                    "isSub": false
                },
                {
                    "songs": [],
                    "paid": false,
                    "onSale": false,
                    "artists": [
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p4.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "黑旋风",
                            "id": 30450256,
                            "img1v1Id_str": "18686200114669622"
                        }
                    ],
                    "copyrightId": 7001,
                    "alias": [],
                    "blurPicUrl": "http://p4.music.126.net/x-QuA5nCDBoiV55h3au1QQ==/109951167848507303.jpg",
                    "companyId": 0,
                    "pic": 109951167848507300,
                    "publishTime": 1663344000000,
                    "picUrl": "http://p4.music.126.net/x-QuA5nCDBoiV55h3au1QQ==/109951167848507303.jpg",
                    "commentThreadId": "R_AL_3_151019014",
                    "picId": 109951167848507300,
                    "artist": {
                        "img1v1Id": 18686200114669624,
                        "topicPerson": 0,
                        "alias": [],
                        "albumSize": 3,
                        "img1v1Url": "http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                        "picUrl": "http://p3.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                        "trans": "",
                        "picId": 0,
                        "followed": false,
                        "briefDesc": "",
                        "musicSize": 14,
                        "name": "黑旋风",
                        "id": 30450256,
                        "img1v1Id_str": "18686200114669622"
                    },
                    "briefDesc": "",
                    "status": 1,
                    "subType": "录音室版",
                    "description": "",
                    "company": "索尼音乐",
                    "tags": "",
                    "name": "嘿",
                    "id": 151019014,
                    "type": "专辑",
                    "size": 8,
                    "picId_str": "109951167848507303",
                    "areaId": 7,
                    "exclusive": false,
                    "isSub": false
                },
                {
                    "songs": [],
                    "paid": false,
                    "onSale": false,
                    "artists": [
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p3.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "ゆず",
                            "id": 22392,
                            "img1v1Id_str": "18686200114669622"
                        }
                    ],
                    "copyrightId": 1416336,
                    "alias": [],
                    "blurPicUrl": "http://p3.music.126.net/MNYcXdAkWh2ZP75p0TjXcQ==/109951167860370920.jpg",
                    "companyId": 0,
                    "pic": 109951167860370910,
                    "publishTime": 1663344000000,
                    "picUrl": "http://p4.music.126.net/MNYcXdAkWh2ZP75p0TjXcQ==/109951167860370920.jpg",
                    "commentThreadId": "R_AL_3_151308084",
                    "picId": 109951167860370910,
                    "artist": {
                        "img1v1Id": 18686200114669624,
                        "topicPerson": 0,
                        "alias": [],
                        "albumSize": 103,
                        "img1v1Url": "http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                        "picUrl": "http://p3.music.126.net/MN06r1pEleMydBTjaQuMOQ==/109951167527186477.jpg",
                        "trans": "柚子",
                        "picId": 109951167527186480,
                        "followed": false,
                        "briefDesc": "",
                        "musicSize": 639,
                        "name": "ゆず",
                        "id": 22392,
                        "picId_str": "109951167527186477",
                        "transNames": [
                            "柚子"
                        ],
                        "img1v1Id_str": "18686200114669622"
                    },
                    "briefDesc": "",
                    "status": 1,
                    "subType": "现场版",
                    "description": "",
                    "company": "SENHA",
                    "tags": "",
                    "name": "YUZU ARENA TOUR 2022 SEES -ALWAYS with you-",
                    "id": 151308084,
                    "type": "专辑",
                    "size": 20,
                    "picId_str": "109951167860370920",
                    "areaId": 8,
                    "exclusive": false,
                    "isSub": false
                },
                {
                    "songs": [],
                    "paid": false,
                    "onSale": false,
                    "artists": [
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p3.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "篠原涼子",
                            "id": 160553,
                            "img1v1Id_str": "18686200114669622"
                        },
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p3.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "小室哲哉",
                            "id": 14452,
                            "img1v1Id_str": "18686200114669622"
                        }
                    ],
                    "copyrightId": 457010,
                    "alias": [],
                    "blurPicUrl": "http://p3.music.126.net/2XIzDIdCY-3agUUJ0iIAVQ==/109951167873026728.jpg",
                    "companyId": 0,
                    "pic": 109951167873026720,
                    "publishTime": 1663344000000,
                    "picUrl": "http://p4.music.126.net/2XIzDIdCY-3agUUJ0iIAVQ==/109951167873026728.jpg",
                    "commentThreadId": "R_AL_3_151491629",
                    "picId": 109951167873026720,
                    "artist": {
                        "img1v1Id": 18686200114669624,
                        "topicPerson": 0,
                        "alias": [],
                        "albumSize": 11,
                        "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                        "picUrl": "http://p3.music.126.net/Q6XYagSoFntAsIZw0Tc2Rg==/727876697614075.jpg",
                        "trans": "",
                        "picId": 727876697614075,
                        "followed": false,
                        "briefDesc": "",
                        "musicSize": 67,
                        "name": "篠原涼子",
                        "id": 160553,
                        "img1v1Id_str": "18686200114669622"
                    },
                    "briefDesc": "",
                    "status": 1,
                    "subType": "录音室版",
                    "description": "",
                    "company": "(P)2022 AVEX ENTERTAINMENT INC.",
                    "tags": "",
                    "name": "恋しさと せつなさと 心強さと 2023",
                    "id": 151491629,
                    "type": "Single",
                    "size": 1,
                    "picId_str": "109951167873026728",
                    "areaId": 8,
                    "transNames": [
                        "爱恋心痛坚强 2023"
                    ],
                    "exclusive": false,
                    "isSub": false
                },
                {
                    "songs": [],
                    "paid": false,
                    "onSale": false,
                    "artists": [
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p3.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "Little Fage",
                            "id": 36090219,
                            "img1v1Id_str": "18686200114669622"
                        }
                    ],
                    "copyrightId": -1,
                    "alias": [],
                    "blurPicUrl": "http://p3.music.126.net/M84WRuaix1nR7bAmihlm3w==/109951167882095137.jpg",
                    "companyId": 0,
                    "pic": 109951167882095140,
                    "publishTime": 1663344000000,
                    "picUrl": "http://p3.music.126.net/M84WRuaix1nR7bAmihlm3w==/109951167882095137.jpg",
                    "commentThreadId": "R_AL_3_151706690",
                    "picId": 109951167882095140,
                    "artist": {
                        "img1v1Id": 18686200114669624,
                        "topicPerson": 0,
                        "alias": [],
                        "albumSize": 20,
                        "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                        "picUrl": "http://p3.music.126.net/B5kgEK-5LjR6ugaTkXM1OA==/109951167881868203.jpg",
                        "trans": "",
                        "picId": 109951167881868210,
                        "followed": false,
                        "briefDesc": "",
                        "musicSize": 48,
                        "name": "Little Fage",
                        "id": 36090219,
                        "picId_str": "109951167881868203",
                        "img1v1Id_str": "18686200114669622"
                    },
                    "briefDesc": "",
                    "status": 1,
                    "subType": "录音室版",
                    "description": "",
                    "company": "网易飓风",
                    "tags": "",
                    "name": "花背篼",
                    "id": 151706690,
                    "type": "Single",
                    "size": 2,
                    "picId_str": "109951167882095137",
                    "areaId": 7,
                    "exclusive": false,
                    "isSub": false
                },
                {
                    "songs": [],
                    "paid": false,
                    "onSale": false,
                    "artists": [
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p3.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "迪力",
                            "id": 12760396,
                            "img1v1Id_str": "18686200114669622"
                        }
                    ],
                    "copyrightId": -1,
                    "alias": [],
                    "blurPicUrl": "http://p3.music.126.net/OosUp0xj8KC_msHalgGHYA==/109951167881877423.jpg",
                    "companyId": 0,
                    "pic": 109951167881877420,
                    "publishTime": 1663344000000,
                    "picUrl": "http://p4.music.126.net/OosUp0xj8KC_msHalgGHYA==/109951167881877423.jpg",
                    "commentThreadId": "R_AL_3_151702875",
                    "picId": 109951167881877420,
                    "artist": {
                        "img1v1Id": 18686200114669624,
                        "topicPerson": 0,
                        "alias": [],
                        "albumSize": 18,
                        "img1v1Url": "http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                        "picUrl": "http://p4.music.126.net/WAcktoiutTy-CDls-i7GMw==/109951165558719406.jpg",
                        "trans": "",
                        "picId": 109951165558719410,
                        "followed": false,
                        "briefDesc": "",
                        "musicSize": 41,
                        "name": "迪力",
                        "id": 12760396,
                        "picId_str": "109951165558719406",
                        "img1v1Id_str": "18686200114669622"
                    },
                    "briefDesc": "",
                    "status": 1,
                    "subType": "录音室版",
                    "description": "",
                    "company": "网易飓风",
                    "tags": "",
                    "name": "词不达意",
                    "id": 151702875,
                    "type": "Single",
                    "size": 2,
                    "picId_str": "109951167881877423",
                    "areaId": 7,
                    "exclusive": false,
                    "isSub": false
                },
                {
                    "songs": [],
                    "paid": false,
                    "onSale": false,
                    "artists": [
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p3.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "桃德李Todd Li",
                            "id": 12268138,
                            "img1v1Id_str": "18686200114669622"
                        }
                    ],
                    "copyrightId": -1,
                    "alias": [],
                    "blurPicUrl": "http://p3.music.126.net/kdUbHIzHx6Wmbi2NGrBQ-A==/109951167876698543.jpg",
                    "companyId": 0,
                    "pic": 109951167876698540,
                    "publishTime": 1663344000000,
                    "picUrl": "http://p3.music.126.net/kdUbHIzHx6Wmbi2NGrBQ-A==/109951167876698543.jpg",
                    "commentThreadId": "R_AL_3_151564313",
                    "picId": 109951167876698540,
                    "artist": {
                        "img1v1Id": 18686200114669624,
                        "topicPerson": 0,
                        "alias": [],
                        "albumSize": 41,
                        "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                        "picUrl": "http://p3.music.126.net/z_9EakAMUbPgPV3jdW571w==/109951164762102541.jpg",
                        "trans": "",
                        "picId": 109951164762102540,
                        "followed": false,
                        "briefDesc": "",
                        "musicSize": 65,
                        "name": "桃德李Todd Li",
                        "id": 12268138,
                        "picId_str": "109951164762102541",
                        "img1v1Id_str": "18686200114669622"
                    },
                    "briefDesc": "",
                    "status": 1,
                    "subType": "录音室版",
                    "description": "",
                    "company": "网易云上 x 青云LAB",
                    "tags": "",
                    "name": "你是你的你",
                    "id": 151564313,
                    "type": "Single",
                    "size": 2,
                    "picId_str": "109951167876698543",
                    "areaId": 7,
                    "exclusive": false,
                    "isSub": false
                },
                {
                    "songs": [],
                    "paid": false,
                    "onSale": false,
                    "artists": [
                        {
                            "img1v1Id": 18686200114669624,
                            "topicPerson": 0,
                            "alias": [],
                            "albumSize": 0,
                            "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                            "picUrl": "http://p3.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                            "trans": "",
                            "picId": 0,
                            "followed": false,
                            "briefDesc": "",
                            "musicSize": 0,
                            "name": "褚晨茜",
                            "id": 12286056,
                            "img1v1Id_str": "18686200114669622"
                        }
                    ],
                    "copyrightId": -1,
                    "alias": [],
                    "blurPicUrl": "http://p3.music.126.net/XM44VNZ2HaYnylNGG6-SPQ==/109951167882158907.jpg",
                    "companyId": 0,
                    "pic": 109951167882158910,
                    "publishTime": 1663344000000,
                    "picUrl": "http://p3.music.126.net/XM44VNZ2HaYnylNGG6-SPQ==/109951167882158907.jpg",
                    "commentThreadId": "R_AL_3_151708310",
                    "picId": 109951167882158910,
                    "artist": {
                        "img1v1Id": 18686200114669624,
                        "topicPerson": 0,
                        "alias": [],
                        "albumSize": 114,
                        "img1v1Url": "http://p3.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
                        "picUrl": "http://p3.music.126.net/O2j2jSfucy79zWyO5Jpfsg==/109951165502682156.jpg",
                        "trans": "",
                        "picId": 109951165502682160,
                        "followed": false,
                        "briefDesc": "",
                        "musicSize": 198,
                        "name": "褚晨茜",
                        "id": 12286056,
                        "picId_str": "109951165502682156",
                        "img1v1Id_str": "18686200114669622"
                    },
                    "briefDesc": "",
                    "status": 1,
                    "subType": "录音室版",
                    "description": "",
                    "company": "网易飓风",
                    "tags": "",
                    "name": "被害者",
                    "id": 151708310,
                    "type": "Single",
                    "size": 2,
                    "picId_str": "109951167882158907",
                    "areaId": 7,
                    "exclusive": false,
                    "isSub": false
                }
            ]
        })
    }
}
</script>
<style scoped lang="less">
.album {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: left;
    padding-bottom: 20px;
    margin: 0 -10px;
    font-size: 0;

    .item_album {
        display: flex;
        flex: 25%;
        max-width: calc(100% / 4 - 20px);
        margin: 20px 10px 0;
        border-radius: 4px;
        background: #f0f0f0;

        &:hover {
            .album-name {
                color: var(--color-text-height);
            }
        }
    }

    .faceImg_album {
        display: block;
        position: relative;
        flex: 2;
        max-width: 120px;
        max-height: 120px;
        // width: 120px;
        // height: 120px;

        &::after {
            display: inline-block;
            content: '';
            position: absolute;
            top: 0;
            right: -20px;
            width: 100%;
            height: 100%;
            background: url('../img/disc.png') no-repeat;
            background-size: contain;
            transition: all .4s linear;
        }

        &:hover {
            &::after {
                right: -25px;
                transform: rotate(90deg);
            }
        }
    }

    .el-image {
        border-radius: 4px;
        z-index: 2;
    }

    .info {
        position: relative;
        flex: 3;
        margin-left: 40px;
        overflow: hidden;

        .album-name {
            padding: 15% 20px 10px 0;
            font-size: 16px;
            color: var(--color-text-main);
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .artist-name {
            font-size: 14px;
            color: var(--color-text);
        }

        .album-type {
            position: absolute;
            top: 5px;
            right: -30px;
            width: 100px;
            line-height: 24px;
            font-size: 12px;
            transform: rotate(45deg);
            text-align: center;
            color: #fff;
            background-color: #ff641e;
        }
    }
}

.el-skeleton {
    display: flex;
    width: auto;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: left;
    padding-bottom: 40px;
    margin: 0 -10px;
    font-size: 0;

    .item_album {
        display: flex;
        flex: 25%;
        max-width: calc(100% / 4 - 20px);
        margin: 20px 10px 0;
    }

    .ske-img {
        display: block;
        position: relative;
        width: 120px;
        height: 120px;
        line-height: 150px;
        text-align: center;
    }

    .ske-info {
        position: relative;
        flex: 1;
        margin: 5% 0 0 10%;
        overflow: hidden;
    }

    .ske-name {
        margin: 5px 0;
    }

    .ske-txt {
        display: block;
        margin-top: 10px;
        width: 10%;
    }

    .ske-tags {
        display: flex;
        padding: 5px 0;

        * {
            width: 10%;
            margin-right: 10px;
        }
    }
}
</style>
